<template>
  <div v-theme:column="'narrow'" id="show-blogs">
    <h1>博客总览</h1>
    <input type="text" placeholder="搜索" v-model="search"/>
    <div v-for="blog in filteredBlogs" :key="blog.id" class="signle-blog">
      <!-- router-link :to 绑定跳转链接与参数 -->
      <router-link :to="'/blog/' + blog.id">
        <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
        <article>
          {{blog.content | snippet}}
        </article>
      </router-link>
    </div>
  </div>
</template>

<script>

export default {
  name: 'show-blogs',
  data(){
    return{
      blogs:[],
      search:""
    }
  },
  created(){
    this.$axios.post('/getAllBlog')
      .then((data) => {
        console.log(data.data);
        this.blogs = data.data;
      });
  },
  computed:{//更新数据建议使用computed
    filteredBlogs: function(){
      //filter遍历集合
      return this.blogs.filter((blog) => {
        //match匹配内容
        return blog.title.match(this.search);
      });
    }
  },
  filters:{//局部声明过滤器
    // ""双引号声明与标签中一样
    // "to-uppercase":function(value){
    //   return value.toUpperCase();
    // }
    // 函数声明使用驼峰命名法
    toUppercase:function(value){
      return value;
    }
  },
  directives:{//局部声明自定义标签
    'rainbow':{
      bind(el){
        //彩虹标题
        el.style.color = "#"+Math.random().toString(16).slice(2,8);
      }
    }
  }
}
</script>

<style>
#show-blogs{
  max-width: 800px;
  margin: 0px auto;
}

.signle-blog{
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  background-color: #cccccc;
  border: 1px dotted #aaaaaa;
}

#show-blogs a{
  color: #444;
  text-decoration: node;
}

input[type="text"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}
</style>
